import echarts from 'echarts'
import _ from 'lodash'
import { secondToString } from 'src/assets/js/util'

function getPieOption (color, legend, seriesData, dom, total = 0) {
  if (!dom) {
    dom = {
      offsetWidth: 300,
      offsetHeight: 150
    }
  }
  const offsetWidth = (dom.offsetWidth - 150 - dom.offsetHeight) > 0 ? dom.offsetHeight : (dom.offsetWidth - 150)
  const out = offsetWidth / dom.offsetHeight * 95
  const option = {
    color: color,
    grid: {
      top: '15%',
      left: 0,
      right: '1%',
      bottom: 5,
      containLabel: true
    },
    legend: {
      orient: 'vertical',
      selectedMode: false,
      top: 'center',
      right: 'right',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        align: 'left',
        verticalAlign: 'middle',
        rich: {
          name: {
            color: '#333333',
            fontSize: 14
          },
          value: {
            color: '#333333',
            fontSize: 14
          },
          rate: {
            color: '#333333',
            fontSize: 14
          }
        }
      },
      data: legend,
      formatter: (name) => {
        if (seriesData.length) {
          const item = seriesData.filter((item) => item.name === name)[0]
          const percent = Number(item.value / total * 100).toFixed(2)
          let label = `{name|${name}:}{value| ${item.value}台}`
          total && (label += ` {rate| ${percent}%}`)
          return label
        }
      }
    },
    series: [{
      name: '需求类型占比',
      type: 'pie',
      silent: true,
      center: [`${(dom.offsetWidth - 150) / dom.offsetWidth * 50}%`, '50%'],
      radius: [`${out * 0.5}%`, `${out}%`],
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false
        }
      },
      labelLine: {
        show: false,
        length: 0,
        length2: 0
      },
      data: seriesData
    }]
  }
  return option
}

function getStatusBar (data) {
  const chartColor = {
    process: '#18D77F', // 加工
    stop: '#FF8559', // 停机
    breaks: '#999999', // 断开
    offLine: '#666666', // 离线
    alarm: '#E43434', // 报警
    changeLine: '#AC70F2', // 换线
    fault: '#F7B82D', // 故障
    repair: '#2BD0F7' // 维修
  }
  const option = {
    grid: {
      bottom: '8%',
      left: 50,
      right: '2%',
      top: '10%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: '',
        label: {
          show: false
        }
      },
      formatter: (params) => {
        let htmlStr = ''
        let value = params[0].data.time
        let color = chartColor[params[0].data.name]
        let name = params[0].data.keyName

        htmlStr += '<div>'
        htmlStr += '<span style="margin-right: 5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
        htmlStr += `${name}：` + value
        htmlStr += '</div>'
        return htmlStr
      }
    },
    xAxis: {
      axisTick: {
        show: false // 隐藏X轴刻度
      },
      axisLine: {
        show: true, // 隐藏X轴轴线
        lineStyle: {
          color: '#d3d3d3'
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#333333' // X轴文字颜色
        },
        interval: 0
      },
      type: 'category',
      data: data.map(item => item.keyName)
    },
    yAxis: {
      type: 'value',
      name: '小时',
      nameTextStyle: {
        color: '#333333',
        fontSize: 14
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#333333'
        }
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#DDD'
        }
      }
    },
    series: [{
      data: data,
      type: 'bar',
      barWidth: 16,
      z: 20,
      stack: 'one',
      itemStyle: {
        normal: {
          color: (params) => {
            return chartColor[params.data.name]
          },
          barBorderRadius: [8, 8, 0, 0]
        }
      },
      label: {
        show: true,
        lineHeight: 16,
        height: 16,
        position: [-4, -24],
        distance: 1,
        color: '#333333',
        formatter: (params) => {
          return params.data.percent + '%'
        }
      }
    }]
  }
  return option
}

// 重构停机原因
function initReason (data) {
  return data.map(item => {
    const min = secondToString(_.cloneDeep(item.value))
    return {
      ...item,
      min: min,
      value: (item.value / 60).toFixed(2)
    }
  })
}
function getXData (data, dom) {
  const itemWidth = (dom.offsetWidth - 100) / data.length - 10
  const itemLength = itemWidth / 7 - 1
  const xData = data.map(item => {
    if (item.name.length > itemLength) {
      let newName = item.name.slice(0, itemLength)
      newName += '...'
      return newName
    }
    return item.name
  })
  return xData
}

function getRateBar (data, color, dom) {
  const max = data.length ? String(_.maxBy(data, 'value').value) : 0
  const dataList = this.initReason(_.cloneDeep(data))
  const xData = this.getXData(dataList, dom)
  const option = {
    grid: {
      top: 35,
      bottom: 30,
      left: max.length < 4 ? 50 : 70,
      right: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: '',
        label: {
          show: false
        }
      },
      formatter: (params, ticket, callback) => {
        let htmlStr = ''
        let value = params[0].data.min
        const colorList = params[0].color.colorStops
        let color = `linear-gradient(${colorList[0].color}, ${colorList[1].color})`
        let name = params[0].name
        htmlStr += '<div>'
        htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-image:' + color + ';"></span>'
        htmlStr += `${name}：${value}`

        htmlStr += '</div>'
        return htmlStr
      }
    },
    dataZoom: [
      {
        type: 'inside',
        disabled: !this.showScale,
        xAxisIndex: 0
      }
    ],
    xAxis: {
      type: 'category',
      data: xData,
      axisTick: {
        show: false // 隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#333333', // X轴文字颜色
          fontSize: 14
        },
        interval: 0
      },
      axisLine: {
        show: true, // 隐藏X轴轴线
        lineStyle: {
          color: '#d3d3d3'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '分钟  ',
      nameTextStyle: {
        align: 'right',
        color: '#333333',
        fontSize: 14
      },
      nameGap: 20,
      // interval: 30,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#DDD'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#333333',
          fontSize: 14
        }
      },
      axisLine: {
        show: false
      }
    },
    series: {
      type: 'bar',
      barWidth: 16,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: color[0]
          },
          {
            offset: 1,
            color: color[1]
          }]),
          barBorderRadius: [6, 6, 0, 0]
        }
      },
      label: {
        show: true,
        position: 'top',
        color: color[1],
        fontSize: 12,
        formatter: (params) => {
          return `${params.data.percent}%`
        }
      },
      data: dataList
    }
  }
  return option
}

function getWorkingChart (color, seriesData, dom) {
  const offsetWidth = (dom.offsetWidth - 320 - dom.offsetHeight) > 0 ? dom.offsetHeight : (dom.offsetWidth - 320)
  const out = offsetWidth / dom.offsetHeight * 85
  const option = {
    color: color,
    grid: {
      top: '15%',
      left: 0,
      right: '1%',
      bottom: 5,
      containLabel: true
    },
    legend: {
      show: false
    },
    series: {
      name: '需求类型占比',
      type: 'pie',
      silent: true,
      center: ['50%', '50%'],
      radius: [`${out * 0.5}%`, `${out}%`],
      label: {
        show: true,
        position: 'outer',
        // alignTo: 'labelLine',
        backgroundColor: 'auto', // 圆点颜色，auto：映射的系列色
        height: 0,
        width: 0,
        lineHeight: 0,
        // distanceToLabelLine: 0, // 圆点到labelline距离
        borderRadius: 2.5,
        padding: [2.5, -2.5, 2.5, -2.5],
        formatter: (item) => {
          return `{a|${item.name}: ${item.percent}%}`
        },
        rich: {
          a: {
            padding: [0, 10, 0, 10],
            color: '#333',
            fontSize: 16
          }
        }
      },
      itemStyle: {
        normal: {
          color: function (params) {
            return color[params.dataIndex]
          }
        }
      },
      data: seriesData
    }
  }
  return option
}

function getLineOption (timeRate, xData) {
  // const max = String(_.maxBy(timeRate))
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(51, 51, 51, 0.8)',
      formatter: function (params, ticket, callback) {
        let htmlStr = ''
        let value = params[0].data + '%'
        let name = params[0].seriesName
        htmlStr += '<div>'
        htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color: #5F77FD"></span>'
        htmlStr += `${name}：${value}`

        htmlStr += '</div>'
        return htmlStr
      },
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    grid: {
      top: 25,
      left: 60,
      right: 20,
      bottom: String(xData[0]).length * 4 + 25
    },
    legend: {
      data: ['时间开动率'],
      show: false
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#D3D3D3'
        }
      },
      splitArea: {
        show: false
      },
      axisLabel: {
        interval: 0,
        rotate: 30,
        margin: 25,
        align: 'center',
        color: '#333333',
        fontSize: 12
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisPointer: {
        show: true,
        type: 'line',
        lineStyle: {
          color: '#D3D3D3',
          type: 'dashed',
          width: 1
        },
        z: 1
      },
      data: xData
    }],

    yAxis: [{
      type: 'value',
      min: 0,
      name: '%   ',
      nameGap: 10,
      nameTextStyle: {
        align: 'right',
        color: '#333333',
        fontSize: 14
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#D3D3D3',
          type: 'dashed',
          width: 1
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 12,
        formatter: '{value}',
        fontSize: 14,
        textStyle: {
          color: '#333333'
        }
      },
      axisTick: {
        show: false
      }
    }],
    series: {
      name: '时间开动率',
      type: 'line',
      showAllSymbol: 'auto',
      symbol: 'emptyCircle',
      symbolSize: 8,
      emphasis: {
        scale: false
      },
      lineStyle: {
        normal: {
          color: '#5F77FD',
          width: 2
        }
      },
      label: {
        show: false
      },
      itemStyle: {
        normal: {
          color: '#5F77FD',
          borderWidth: 2,
          borderColor: '#5F77FD'
        },
        emphasis: {
          color: '#fff',
          borderColor: '#5F77FD'
        }
      },
      tooltip: {
        show: true
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(95, 119, 253, 0.56)'
          },
          {
            offset: 1,
            color: 'rgba(95, 119, 253, 0.14)'
          }
          ], false)
        }
      },
      data: timeRate
    }
  }
  return option
}

export default {
  getPieOption,
  getStatusBar,
  getRateBar,
  initReason,
  getXData,
  getWorkingChart,
  getLineOption
}
